import styles from "./dialog-list.module.scss";
import {DialogItem} from "@/app/components/dialog/dialog-item";
import {DialogType} from "@/types/chat";
import {DialogResizeableSidebar} from "@/app/components/dialog/dialog-resizeable-sidebar";
import React, {useState} from "react";
import {useNavigate} from "react-router-dom";
import {userChatStore} from "@/app/store/chat-store";
import { Modal, List } from 'antd';
interface Item{
    id:number;
    title:string;
    description:string;
}
/**
 * 对话框列表
 */
export function DialogList() {
    const [dialogs, setDialogs] = useState<DialogType[]>([]);
    const [selected, setSelected] = useState<DialogType>();
    const navigate = useNavigate();
    const chatStore = userChatStore();
    // 在组件中使用这三个变量来获取聊天会话的状态信息，并通过 selectSession 函数来选择不同的聊天会话。
    const [sessions,currentSessionIndex,selectSession] = userChatStore((state) => [
        state.sessions,
        state.currentSessionIndex,
        state.selectSession
    ]);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [selectedItem, setSelectedItem] = useState<Item | undefined>();
    const [selectedItemIndex, setSelectedItemIndex] = useState<number | null>(null);

    const showModal = () => {
        setIsModalVisible(true);
    };
    const handleOk = () => {
        // 处理选中列表项后的操作，例如添加会话等
        if (selectedItem) {
            const  session = chatStore.currentSession();
            // 在这里执行添加会话的逻辑，使用 selectedItem 的值
            chatStore.openSession(selectedItem.title,selectedItem.description);
            // 选择会话
            selectSession(0)
            // 跳转子路由
            navigate(`/chat/${session.id}`, { state: { title: selectedItem.title } })

            // 重置选中项和隐藏 Modal
            setSelectedItem(undefined);
            setIsModalVisible(false);
        }
    };
    const handleCancel = () => {
        setSelectedItem(undefined); // 重置选中项
        setIsModalVisible(false); // 隐藏 Modal
    };
    // todo 模拟数据，h后续可以从接口获取
    const yourData = [
        { id: 1, title: '面试官' ,description:"请问有什么能帮助你的吗？我可以帮你进行模拟面试" },
        { id: 2, title: '文案写手' ,description:"请问有什么能帮助你的吗？我可以为你进行文案写作"},
        { id: 3, title: '法务人员' ,description:"请问有什么能帮助你的吗？我可以为你提供法律咨询"},
        { id: 4, title: '心里咨询' ,description:"请问有什么能帮助你的吗？我可以为你进行心理咨询"},

    ];
    const handleListItemClick = (item:Item,index:number) => {
        // 设置选中的列表项
        setSelectedItem(item);
        // 记录选中的索引 用于高亮显示
        setSelectedItemIndex(index)
    };
    return (
        // DialogResizeableSidebar 用于调整对话栏的大小
        <DialogResizeableSidebar>
            {/*头部操作*/}
            <div className={styles["dialog-head"]}>
                <div className={styles["dialog-search-box"]}><input type="text" placeholder="搜索"/></div>
                <div className={styles["dialog-search-add"]} onClick={showModal}></div>
                <Modal
                    title="选择会话"
                    open={isModalVisible}
                    onOk={handleOk}
                    onCancel={handleCancel}
                >
                    <List
                        dataSource={yourData}
                        renderItem={(item,index) => (
                            <List.Item
                                onClick={() => handleListItemClick(item,index)}
                                style={{ cursor: 'pointer', backgroundColor: selectedItemIndex === index ? '#e6f7ff' : '' }}
                            >
                                {item.title}
                            </List.Item>
                        )}
                    />
                </Modal>
            </div>
            {/*对话列表*/}
            <div className={styles["dialog-list"]}>
                {/*循环遍历数据，当有数据变更时会自动刷新到页面*/}
                {sessions.map((session, index) => (
                    <DialogItem
                        key={session.id}
                        session={session}
                        selected={currentSessionIndex === index}
                        onClick={() => {
                            // 点击时跳转到对应的界面，并传递必要参数信息
                            selectSession(index);
                            navigate(`/chat/${session.id}`, {state: {title: session.dialog.title}})
                        }}
                        onClickDelete={() => {
                            chatStore.deleteSession(index);
                        }}
                    />
                ))}
            </div>
        </DialogResizeableSidebar>
    );

}